<template>
	<view class="star-container">
		<!-- 下拉框选择星座 -->
		<view class="zodiac-selector">
			<picker mode="selector" :range="zodiacs" :value="currentZodiacIndex" @change="selectZodiac">
				<view class="picker">
					{{ currentZodiac }}
					<text class="iconfont icon-arrow-down"></text>
				</view>
			</picker>
		</view>
		<!-- 星座详情 -->
		<scroll-view class="star-scroll" scroll-y>
			<view class="star-card">
				<view class="star-header">
					<text class="star-title">星座: {{ starList.title }}</text>
				</view>
				<view class="star-content">
					<view class="star-detail">
						<text class="star-time">时间: {{ starList.time }}</text>
						<text class="star-shortcomment">每日一句: {{ starList.shortcomment }}</text>
						<view class="star-fortune">
							<text class="star-fortune-title">幸运指数:</text>
							<view class="star-fortune-values">
								<view class="star-fortune-item">所有: {{ starList.fortune.all }}</view>
								<view class="star-fortune-item">爱情: {{ starList.fortune.love }}</view>
								<view class="star-fortune-item">工作: {{ starList.fortune.work }}</view>
								<view class="star-fortune-item">财富: {{ starList.fortune.money }}</view>
								<view class="star-fortune-item">健康: {{ starList.fortune.health }}</view>
							</view>
						</view>
						<view class="star-fortunetext">
							<text class="star-fortunetext-title">运势:</text>
							<view class="star-fortunetext-values">
								<view class="star-fortunetext-item">所有: {{ starList.fortunetext.all }}</view>
								<view class="star-fortunetext-item">爱情: {{ starList.fortunetext.love }}</view>
								<view class="star-fortunetext-item">工作: {{ starList.fortunetext.work }}</view>
								<view class="star-fortunetext-item">财富: {{ starList.fortunetext.money }}</view>
								<view class="star-fortunetext-item">健康: {{ starList.fortunetext.health }}</view>
							</view>
						</view>
						<view class="star-lucky">
							<text class="star-lucky-title">幸运:</text>
							<view class="star-lucky-details">
								<view class="star-lucky-item">数字: {{ starList.luckynumber }}</view>
								<view class="star-lucky-item">颜色: {{ starList.luckycolor }}</view>
								<view class="star-lucky-item">星座: {{ starList.luckyconstellation }}</view>
							</view>
						</view>
						<view class="star-percentage">
							<text class="star-percentage-title">百分比:</text>
							<view class="star-percentage-values">
								<view class="star-percentage-item">所有: {{ starList.index.all }}</view>
								<view class="star-percentage-item">爱情: {{ starList.index.love }}</view>
								<view class="star-percentage-item">工作: {{ starList.index.work }}</view>
								<view class="star-percentage-item">财富: {{ starList.index.money }}</view>
								<view class="star-percentage-item">健康: {{ starList.index.health }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		CONFIG
	} from '../../utils/config';

	let starList = ref({});
	let zodiacs = ref(['aries', 'taurus', 'gemini', 'cancer', 'leo', 'virgo', 'libra', 'scorpio', 'sagittarius',
		'capricorn', 'aquarius', 'pisces'
	]);
	let currentZodiac = ref(zodiacs.value[0]);
	let currentZodiacIndex = ref(0); // 用于picker的索引

	onMounted(async () => {
		await getStarItem(currentZodiac.value);
	});

	async function getStarItem(zodiac) {
		try {
			const res = await new Promise((resolve, reject) => {
				uni.request({
					url: `${CONFIG.star_url}?type=${zodiac}&time=today`,
					method: 'GET',
					success: (response) => {
						if (response.statusCode === 200 && response.data.success) {
							resolve(response.data.data);
						} else {
							reject(new Error('Failed to fetch data or data not successful'));
						}
					},
					fail: (error) => {
						reject(error);
					}
				});
			});
			console.log(res);
			starList.value = res; // 将获取的数据赋值给 starList
		} catch (error) {
			console.error('Error fetching star items:', error);
		}
	}

	function selectZodiac(event) {
		const index = event.detail.value;
		currentZodiac.value = zodiacs.value[index];
		currentZodiacIndex.value = index; // 更新picker的索引
		getStarItem(currentZodiac.value);
	}
</script>

<style scoped>
	.zodiac-selector {
		padding: 20px;
		text-align: center;
	}

	.picker {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		background-color: #ffffff;
		border-radius: 30px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: all 0.3s;
	}

	.picker:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.iconfont {
		margin-left: 10px;
		font-size: 16px;
	}

	.star-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		min-height: 100vh;
		background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
	}

	.star-scroll {
		width: 100%;
		max-width: 600px;
		margin-top: 20px;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.star-card {
		padding: 30px;
		background-color: #fff;
		border-radius: 15px;
	}

	.star-header {
		text-align: center;
		margin-bottom: 20px;
	}

	.star-title {
		font-size: 24px;
		font-weight: 600;
		color: #333;
	}

	.star-content {
		font-size: 16px;
		color: #555;
	}

	.star-detail {
		margin-bottom: 15px;
	}

	.star-time,
	.star-shortcomment,
	.star-lucky-title,
	.star-percentage-title,
	.star-fortune-title,
	.star-fortunetext-title {
		font-weight: 500;
		margin-bottom: 5px;
	}

	.star-fortune-values,
	.star-fortunetext-values,
	.star-lucky-details,
	.star-percentage-values {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.star-fortune-item,
	.star-fortunetext-item,
	.star-lucky-item,
	.star-percentage-item {
		background-color: #f5f5f5;
		padding: 8px 12px;
		border-radius: 10px;
		font-size: 14px;
	}

	.star-lucky-details {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
</style>